<template>
	<view class="apply-v">
		<view class="top_sticky">
		  位置上报
		</view>
			<view class="form-item">
				<text>服务定位开关</text>
				<u-input type="text" v-model="reportName" disabled="true" placeholder="开启" placeholder-style="color: #1F2329" />
			</view>
			<view class="divider"></view>
			<view class="form-item">
				<text>上报频率</text>
				<u-input type="text"  v-model="reportRemark" disabled="true" placeholder="1组180S" placeholder-style="color: #1F2329" />
			</view>
			<view class="divider"></view>
			<view class="form-item">
				<text>定位模式</text>
				<u-input type="text"  v-model="reportRemark" disabled="true" placeholder="网络定位" placeholder-style="color: #1F2329" />
			</view>
			<view class="divider"></view>
			<view class="form-item">
				<text>网络类型</text>
				<u-input type="text"  v-model="reportRemark" disabled="true" placeholder="4G/5G以上网络" placeholder-style="color: #1F2329" />
			</view>
			<view class="divider"></view>
			<view class="form-item">
				<text>GPS状态</text>
				<u-input type="text"  v-model="reportRemark" disabled="true" placeholder="开启" placeholder-style="color: #1F2329" />
			</view>
			<view class="divider"></view>
			<view class="form-item">
				<text>本机定位开关</text>
				<u-switch v-model="checked" :size="40" active-color="#2A78FF" inactive-color="#eee">	 
				</u-switch>
				<view v-if="checked">
					<text class="switch-text">开</text>
				</view>
				<!-- 自定义关闭状态内容 -->
				<view v-else>
					<text class="switch-text">关</text>
				</view>
				<!-- <u-input type="text"  v-model="reportRemark" placeholder="请输入上报备注" placeholder-style="color: #1F2329" /> -->
			</view>
			<view class="divider"></view>
			<view class="form-item-dw">
				<span style="font-size: 25rpx;color:#1F2329">定位中</span>
				<span style="text-align: right;font-size: 25rpx;color: #979797;">2025-09-15 15:30:00</span>
			</view>
			<view class="location-info">
				<view  style="width: 100%;font-size: 32rpx;    background-color: #fdf6ec;
					color: #ff9900; padding: 15rpx 25rpx; align-items: center; border-radius: 3px; display: inline-block;
					border: 1px solid #fcbd71; line-height: 1"><u-icon :name="mpImg"  size="30" style="margin-right: 15rpx;"></u-icon>最后位置：{{ location }}</view>
			</view>
			<view class="button-but">
				<button type="primary" class="button-btn" style="width: 100%;" @click="submitReport">上报该位置</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				height: '1050rpx',
				mpImg:require('@/static/image/zuobiao.png'),
				src: "", //require('@/static/image/tabbar/dt.png'),
				showPopup: true,
			    reportName: '',
			    reportRemark: '',
			    location: '福建省福州市鼓楼区凉州路',
				checked: true
			};
		},
		computed: {
			
		},
		watch: {
			
		},
		onShow() {
			this.showPopup = true
		},
		onLoad() {
			
		},
		onUnload() {
			
		},
		methods: {
		    openPopup() {
		      this.showPopup = true;
		    },
		    submitReport() {
		      // 处理上报逻辑
		      console.log('上报名称:', this.reportName);
		      console.log('上报备注:', this.reportRemark);
		      console.log('位置:', this.location);
		
		      // 关闭弹出框
		      this.showPopup = false;
		    }
		}
	};
</script>

<style lang="scss">
	.top_sticky {
	  z-index: 999;
	  position: sticky;
	  top: var(--window-top);
	  background: linear-gradient(to right, #014FEB , #2775FE);
	  height: 130rpx;
	  line-height: 170rpx;
		color: #fff;
	  text-align: center;
	  font-weight: 400;
	  font-size: 36rpx;
	}
	
	
	.drag-handle {
	  width: 70px;
	  height: 5px;
	  background-color: #ccc;
	  border-radius: 5px;
	}
	
	
	.form-item {
	  display: flex;
	  align-items: center;
	  padding: 20rpx;
	}
	.form-item-dw{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  width: 100%;
	  padding: 20rpx;
	  box-sizing: border-box;
	}
	
	.form-item text {
	  width: 240rpx;
	  color: #8F959E;
	  font-size: 32rpx;
	}
	
	.location-info {
	  // background-color: #ffebcc;
	  // padding: 10px;
	  border-radius: 5px;
	  margin: 20rpx;
	}
	
	.button-btn{
		height: 78rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		width: 90%;
	}
	.button-but{
		margin-top: 500rpx;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
	}
	
	.divider {
	  border-bottom: 1px solid #EBF5FF;
	}
	
	
	/deep/ .u-input__input{
		font-size: 32rpx !important;
	}
	
	/deep/ .uni-input-wrapper{
		color: #1F2329 !important;
	}
	
</style>